<!--
	作者：andli
	时间：2015-10-22
	描述：图片轮播 加载动态数据 URL
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			/*通过css来控制 图片轮播控件的位置*/
			
			.mui-slider {
				margin-top: 50px;
			}
			.mui-slider-indicator {
				margin-left: 130px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">图片轮播 网络图片</h1>
		</header>
		<div class="mui-content">
		</div>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
				//测试数据
				var jsondata = {
					"Data": [{
						"title": "微微一笑很倾城",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/d2178b39bb932a88a97de4f7b887cdc6.png"
					}, {
						"title": "东京爱情故事",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/c2d2f43284665ac74af0073cfb23e2f4.png"
					}, {
						"title": "剩女W小姐脱光记",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/7649b8d2d7276f8e0871dc591f78e653.png"
					}, {
						"title": "法航447的最后4分钟",
						"url": "http://7xmx2j.com1.z0.glb.clouddn.com/apicloud/4525a00eae41273882abaf381f192879.png"
					}]
				};
				//是否循环
				var isLoop = true;
				//是否自动播放(前提：可以循环)
				var isauto = true;
				var galleryData = jsondata.Data;
				var length = galleryData.length;
				var html = '';
				html += '<div class="mui-slider">';
				//动态添加 图片
				if (isLoop) {
					//增加 mui-slider-loop
					html += '<div class="mui-slider-group mui-slider-loop" id="mygallery">';
				} else {
					html += '<div class="mui-slider-group" id="mygallery">';
				} if (isLoop) {
					html += '<div class="mui-slider-item" id="' + (length - 1) + '">'
					html += '<a href="">';
					html += '<img src="' + galleryData[length - 1].url + '">';
					html += '<p class="mui-slider-title">' + galleryData[length - 1].title + '</p>';
					html += '</a>';
					html += '</div>';
				}
				for (var i = 0; i < length; i++) {
					html += '<div class="mui-slider-item" id="' + i + '">'
					html += '<a href="#">';
					html += '<img src="' + galleryData[i].url + '">';
					html += '<p class="mui-slider-title">' + galleryData[i].title + '</p>';
					html += '</a>';
					html += '</div>';
				}
				if (isLoop) {
					html += '<div class="mui-slider-item" id="0">'
					html += '<a href="#">';
					html += '<img src="' + galleryData[0].url + '">';
					html += '<p class="mui-slider-title">' + galleryData[0].title + '</p>';
					html += '</a>';
					html += '</div>';
				}
				html += '</div>';
				//动态添加 indicator
				html += '<div class="mui-slider-indicator">';
				for (var i = 0; i < length; i++) {
					if (i == 0) {
						html += '<div class="mui-indicator mui-active"></div> '; //默认从0开始
					} else {
						html += '<div class = "mui-indicator"></div>';
					}
				}
				html += '</div>';
				html += '</div>';
				console.log(html);
				//添加图片轮播控件html
				Zepto('.mui-content').append(html);
				//图片轮播初始化（不可缺少，否则无法正常显示）
				var gallery = mui('.mui-slider');
				//轮询时间
				var autotime = 0;
				if (isauto) {
					autotime = 2000;
				}
				gallery.slider({
					interval: autotime //轮播周期，默认为0：不轮播
				});
				//事件绑定:通过id来实现事件绑定
				mui(".mui-slider").on('tap', '.mui-slider-item', function() {
					var id = this.getAttribute("id");
					plus.nativeUI.alert(jsondata.Data[id].title);
				});
			});
		</script>
	</body>

</html>